<template>
  <div id="#app">
    <my-header />
    <nav-bar />
    <error-tip />
    <router-view v-slot="{ Component }" v-if="!errorCode">
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive>      
    </router-view>
    <my-tab />
  </div>  
</template>

<script>
import MyHeader from '@/components/Header';
import MyTab from '@/components/Tab';
import NavBar from '@/components/NavBar';
import ErrorTip from '@/components/ErrorTip';

import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { watch, onMounted, computed } from 'vue';

export default {
  name: 'App',
  components: {
    MyHeader,
    MyTab,
    NavBar,
    ErrorTip
  },
  setup () {
    const store = useStore(),
          state = store.state,
          router = useRouter();

    router.push('/');
    store.commit('setField', 'today');

    watch(() => {
      return router.currentRoute.value.name
    }, (value) => {
      store.commit('setField', value);
    })

    return {
      errorCode: computed(() => store.state.errorCode)
    }
  }
}
</script>
